<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css"
          media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form" lay-filter="statisticsForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <select id="select1" lay-filter="select1" lay-verify="required">
                                <option value="date">请选择查询方式(年/月/日)</option>
                                <option value="year" id="year">年</option>
                                <option value="month" id="month">月</option>
                                <option value="date" id="date">日</option>
                            </select>
                        </div>

                        <div class="layui-inline">

                            <div class="layui-inline">
                                <div class="layui-input-inline" id="test1">
                                    <input type="text" autocomplete="off" id="date1" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <button id="searchBtn" type="button"
                                    class="layui-btn layui-btn-radius layui-btn-warm"

                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </fieldset>
    </div>
</div>

<table id="statisticsTable" lay-filter="currentTableFilter"></table>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script type="text/javascript">
    layui.use(["table", "layer", "laydate", "form"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;

        //给搜索按钮绑定事件
        $("#searchBtn").on("click", function () {
            //渲染表格数据
            table.render({
                elem: "#statisticsTable",
                url: "/statistics01?action=list",
                where: {
                    keyword:$("#date1").val(),
                },
                cols : [ [ {
                    title : "商品ID",
                    field : "commId",
                    sort:"sort"
                }, {
                    title : "商品名称",
                    field : "commName"
                }, {
                    title : "生产厂家",
                    field : "commManufacturer"
                }, {
                    title : "商品种类",
                    field : "commMarking"
                }, {
                    title : "商品品种",
                    field : "commSpecifications"
                },{
                    title : "出入库",
                    field : "djCrk"

                }, {
                    title : "出/入库数量",
                    field : "djQuantity"
                },

                ] ],
                page: true,
                limit:5,
                limits: [5, 10, 15, 20]
            });
        }).click();


        form.on("select(select1)", function (data) {
            $("#date1").remove();
            $("#test1").append('<input type="text" autocomplete="off" id="date1" class="layui-input" >');
            //日期范围
            laydate.render({
                elem: '#date1'
                , range: '~',
                type: data.value
            });

        });
    });

</script>
</body>
</html>
